{% extends "single_demo.html" %}

{% block demo-header %}Container{% endblock %}

{% block demo-content %}

<style>

.containers-shelves {
  overflow: hidden;
}

.containers-shelves > .tv-container-start-scroll {
  -webkit-transition: top 500ms ease;
}

.containers-vertical-cover {
  display: inline-block;
}

.containers-vertical-cover img,
.containers-vertical-highlight {
  height: 150px;
  margin: 5px;
  width: 100px;
}

.containers-horizontal-cover img {
  height: 100px;
  margin: 5px;
  width: 150px;
}

.containers-horizontal-cover.tv-component-focused img,
.containers-vertical-cover.tv-component-focused img,
.containers-vertical-highlight {
  -webkit-box-shadow: 0 0 20px #6391de, 0 0 7px #f2f2f2, 0 0 2px #FFF;
}

.containers-scrollable {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 340px;
}

.containers-index {
  font-size: 72px;
  font-weight: bold;
  height: 160px;
  line-height: 160px;
  position: absolute;
  text-align: center;
  width: 110px;
}

.containers-animated .tv-container-middle-scroll {
  -webkit-transition: left 200ms ease;
}

.containers-has-highlight {
  width: 330px;
}

.containers-has-highlight .containers-vertical-cover.tv-component-focused img {
  -webkit-box-shadow: none;
}

.containers-vertical-highlight {
  display: none;
  position: absolute;
  z-index: 1;
}

.containers-vertical-highlight.tv-container-highlight-focused {
  display: block;
}

.containers-has-slits {
  width: 400px;
}

.containers-left-slit,
.containers-right-slit {
  background-color: black;
  bottom: 0;
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 1;
}

.containers-left-slit {
  left: 0;
}

.containers-right-slit {
  right: 0;
}

.containers-slit-top {
  height: 76px;
  position: absolute;
  top: 0;
  width: 18px;
}

.containers-right-slit .containers-slit-top {
  background: url(http://www.gstatic.com/tv/ch/icon/img_shadow_top_right.png) no-repeat;
  right: 0;
}

.containers-left-slit .containers-slit-top {
  background: url(http://www.gstatic.com/tv/ch/icon/img_shadow_top_left.png) no-repeat;
  left: 0;
}

.containers-slit-middle {
  bottom: 76px;
  position: absolute;
  top: 76px;
  width: 18px;
}

.containers-right-slit .containers-slit-middle {
  background: url(http://www.gstatic.com/tv/ch/icon/img_shadow_middle_right_100px.png) repeat-y;
  right: 0;
}

.containers-left-slit .containers-slit-middle {
  background: url(http://www.gstatic.com/tv/ch/icon/img_shadow_middle_left_100px.png) repeat-y;
  left: 0;
}

.containers-slit-bottom {
  bottom: 0;
  height: 76px;
  position: absolute;
  width: 18px;
}

.containers-right-slit .containers-slit-bottom {
  background: url(http://www.gstatic.com/tv/ch/icon/img_shadow_bottom_right.png) no-repeat;
  right: 0;
}

.containers-left-slit .containers-slit-bottom {
  background: url(http://www.gstatic.com/tv/ch/icon/img_shadow_bottom_left.png) no-repeat;
  left: 0;
}

.containers-left-slit,
.containers-right-slit {
  display: none;
}

.containers-left-slit.tv-container-start-slit-shown,
.containers-right-slit.tv-container-end-slit-shown {
  display: block;
}

.containers-title {
  text-align: center;
}

</style>

<div class="containers-shelves tv-container-vertical">
  <div class="tv-container-start-scroll">
    <div class="tv-container-vertical">
      <p>Containers (<i>JS:</i> <code>tv.ui.Container</code>, <i>CSS:</i> <code>tv-container</code>) are powerful building blocks for your application.

      <p>Both horizontal (<i>CSS:</i> <code>tv-container-horizontal</code>)...

      <div class="tv-container-horizontal">
        <div class="containers-vertical-cover tv-component">
          <img src="http://g2.gstatic.com/tv/thumb/movies/93951/93951_aa.jpg">
        </div>
        <div class="containers-vertical-cover tv-component">
          <img src="http://g2.gstatic.com/tv/thumb/movies/83199/83199_aa.jpg">
        </div>
        <div class="containers-vertical-cover tv-component">
          <img src="http://g1.gstatic.com/tv/thumb/movies/80009/80009_ab.jpg">
        </div>
        <div class="containers-vertical-cover tv-component">
          <img src="http://g2.gstatic.com/tv/thumb/movies/38783/38783_aa.jpg">
        </div>
        <div class="containers-vertical-cover tv-component">
          <img src="http://g0.gstatic.com/tv/thumb/movies/69791/69791_ab.jpg">
        </div>
      </div>
    </div>

    <div class="tv-container-vertical">
      <p>...and vertical (<i>CSS:</i> <code>tv-container-vertical</code>) containers are supported.

      <div class="tv-container-vertical">
        <div class="containers-horizontal-cover tv-component">
          <img src="http://www.dishaccess.tv/posters/1274280649284_wide_ar20100308170148_432x288_Titanic_poster.jpg168x112.jpg">
        </div>
        <div class="containers-horizontal-cover tv-component">
          <img src="http://www.dishaccess.tv/posters/1274113948681_wide_ah20100304095510_432x288_American_Beauty_poster.jpg168x112.jpg">
        </div>
        <div class="containers-horizontal-cover tv-component">
          <img src="http://www.dishaccess.tv/posters/1274996386793_wide_ar20100309140642_432x288_The_LOTR_Return_of_the_King_poster.jpg168x112.jpg">
        </div>
      </div>
    </div>

    <div class="tv-container-vertical">
      <p>Containers are great when you have more content than place to display it.
      To suit different needs, there are two scrolling policies. One keeps selected
      item at start of the container (<i>CSS:</i> <code>tv-container-start-scroll</code>).

      <div class="tv-container-horizontal containers-scrollable">
        <div class="tv-container-start-scroll">
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">1</div>
            <img src="http://g2.gstatic.com/tv/thumb/movies/93951/93951_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component tv-container-selected-child">
            <div class="containers-index">2</div>
            <img src="http://g2.gstatic.com/tv/thumb/movies/83199/83199_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">3</div>
            <img src="http://g1.gstatic.com/tv/thumb/movies/80009/80009_ab.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">4</div>
            <img src="http://g2.gstatic.com/tv/thumb/movies/38783/38783_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">5</div>
            <img src="http://g0.gstatic.com/tv/thumb/movies/69791/69791_ab.jpg">
          </div>
        </div>
      </div>

      <p>The other one tries to position selected item in the middle of the container (<i>CSS:</i> <code>tv-container-middle-scroll</code>).
      Use &larr; and &rarr; or mouse to discover differences between policies.

      <div class="tv-container-horizontal containers-scrollable containers-indexed">
        <div class="tv-container-middle-scroll">
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">1</div>
            <img src="http://g2.gstatic.com/tv/thumb/movies/93951/93951_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component tv-container-selected-child">
            <div class="containers-index">2</div>
            <img src="http://g2.gstatic.com/tv/thumb/movies/83199/83199_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">3</div>
            <img src="http://g1.gstatic.com/tv/thumb/movies/80009/80009_ab.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">4</div>
            <img src="http://g2.gstatic.com/tv/thumb/movies/38783/38783_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <div class="containers-index">5</div>
            <img src="http://g0.gstatic.com/tv/thumb/movies/69791/69791_ab.jpg">
          </div>
        </div>
      </div>
    </div>

    <div class="tv-container-vertical">
      <p>Animations (<i>CSS:</i> <code>-webkit-transition</code>) enrich user experience, helping user to understand what is going on.
      Try to scroll following container.

      <div class="tv-container-horizontal containers-scrollable containers-animated">
        <div class="tv-container-middle-scroll">
          <div class="containers-vertical-cover tv-component">
            <img src="http://g2.gstatic.com/tv/thumb/movies/93951/93951_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g2.gstatic.com/tv/thumb/movies/83199/83199_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g1.gstatic.com/tv/thumb/movies/80009/80009_ab.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g2.gstatic.com/tv/thumb/movies/38783/38783_aa.jpg">
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g0.gstatic.com/tv/thumb/movies/69791/69791_ab.jpg">
          </div>
        </div>
      </div>

      <p>To reduce number of moving parts and make scrolling even more visually pleasant, you can use detached highlight (<i>CSS:</i> <code>tv-container-highlight</code>).
      Notice that highlight stays in place when container is scrolled.

      <div class="tv-container-horizontal containers-scrollable containers-animated containers-has-highlight">
        <div class="containers-vertical-highlight tv-container-highlight"></div>

        <div class="tv-container-mock-scroll"><div class="containers-vertical-cover"><img></div></div>

        <div class="tv-container-middle-scroll">
          <div class="containers-vertical-cover tv-component"><img src="http://g2.gstatic.com/tv/thumb/movies/93951/93951_aa.jpg"></div><div class="containers-vertical-cover tv-component"><img src="http://g2.gstatic.com/tv/thumb/movies/83199/83199_aa.jpg"></div><div class="containers-vertical-cover tv-component"><img src="http://g1.gstatic.com/tv/thumb/movies/80009/80009_ab.jpg"></div><div class="containers-vertical-cover tv-component"><img src="http://g2.gstatic.com/tv/thumb/movies/38783/38783_aa.jpg"></div><div class="containers-vertical-cover tv-component"><img src="http://g0.gstatic.com/tv/thumb/movies/69791/69791_ab.jpg"></div>
        </div>
      </div>
    </div>

    <div class="tv-container-vertical">
      <p>Slits (<i>CSS:</i> <code>tv-container-start-slit</code>, <code>tv-container-end-slit</code>) suggest there are more items to the left and right of scrolling window.

      <div class="tv-container-horizontal containers-scrollable containers-animated containers-has-slits">
        <div class="containers-left-slit tv-container-start-slit">
          <div class="containers-slit-top"></div>
          <div class="containers-slit-middle"></div>
          <div class="containers-slit-bottom"></div>
        </div>
        <div class="containers-right-slit tv-container-end-slit">
          <div class="containers-slit-top"></div>
          <div class="containers-slit-middle"></div>
          <div class="containers-slit-bottom"></div>
        </div>

        <div class="tv-container-middle-scroll">
          <div class="containers-vertical-cover tv-component">
            <img src="http://g2.gstatic.com/tv/thumb/movies/93951/93951_aa.jpg">
            <div class="containers-title">Avatar</div>
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g2.gstatic.com/tv/thumb/movies/83199/83199_aa.jpg">
            <div class="containers-title">Inception</div>
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g1.gstatic.com/tv/thumb/movies/80009/80009_ab.jpg">
            <div class="containers-title">Iron Man</div>
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g2.gstatic.com/tv/thumb/movies/38783/38783_aa.jpg">
            <div class="containers-title">Matrix</div>
          </div>
          <div class="containers-vertical-cover tv-component">
            <img src="http://g0.gstatic.com/tv/thumb/movies/69791/69791_ab.jpg">
            <div class="containers-title">Terminator</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

{% endblock %}
